<template>
  <div v-if="Object.keys(commentInfo).length !==0" class="comment-info">
    <div class="info-title">
      <span>用户评价</span>
      <span>更多</span>
    </div>

    <div class="info-content">
      <div class="info-user">
        <img src="~assets/img/common/placeholder.png" alt="">
        <span>{{ commentInfo.uname }}</span>
      </div>

      <p class="info-pl">{{ commentInfo.content }}</p>

      <div class="info-style">
        <span>{{ commentInfo.created | showDate }}</span>
        <span>{{ commentInfo.style }}</span>
      </div>
      
      <div class="info-imgs">
        <img src="~assets/img/home/news/11.webp" alt="">
        <img src="~assets/img/home/news/12.webp" alt="">
        <img src="~assets/img/home/news/10.webp" alt="">
      </div>
    </div>

  </div>
</template>

<script>
  //引入时间格式化工具
  import { formatDate } from 'common/utils.js'

  export default {
    name: "",
    props: {
      commentInfo: {
        type: Object,
        default(){
          return {}
        }
      }
    },
    filters: { //定义私有过滤器(评论时间)
      showDate: function (value) {
        //1.value：时间戳   将时间戳转为Date对象
        let date = new Date(value * 1000);

        //2.将date对象进行格式化  调用格式化工具utils.js中的formatDate方法 (需要的格式化对象,格式)
        return formatDate(date, 'yyyy-MM-dd')
      }
    }
  }
</script>

<style lang="less" scoped>
  .comment-info{
    padding: 16px 10px;
    border-bottom: 4px solid #eee;
  }
  .info-title{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding-bottom: 14px;
    font-size: 15px;
    color: black;
  }
  .info-title span:nth-child(2){
    padding-right: 20px;
    color: black;
  }
  .info-content{
    padding: 6px;
  }
  .info-user span{
    font-size: 16px;
    padding-left: 6px;
    color: black;
  }
  .info-user img{
    display: inline-block;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    vertical-align: middle;
  }
  .info-pl{
    padding: 12px 0;
    font-size: 14px;
  }
  .info-style{
    font-size: 15px;
  }
  .info-style span:nth-child(2){
    margin-left: 12px;
  }
  .info-imgs{
    padding-top: 6px;
    display: flex;
    flex-wrap: wrap;
    img{
      display: block;
      width: 32.4%;
      margin-right: 3px;
    }
  }
</style>
